<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <style>
</style>
  </head>
  <#include "/head.html" parse=true/>
  <body >
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            <small>系统管理>>权限管理</small>
          </h1>
        </section>
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">请选择查询要素</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form class="form-horizontal">
              <div class="box-body">
                <div class="form-group">
                        <label for="mapping_query"  class="col-sm-1 control-label">映射</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="mapping_query" />
                        </div>
                        <label for="permissionName_query"  class="col-sm-1 control-label">权限名</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" id="permissionName_query" />
                        </div>
                        <label for="url_query"  class="col-sm-1 control-label">url</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="url_query" />
                        </div>
                </div>
              </div>
              <!-- /.box-body -->
              <div class="box-footer">
                 <a  class="btn btn-info" id="query" style="margin-left:50%">查询</a>&nbsp;&nbsp;
                 <a  class="btn btn-success" id="reset" >重置</a>&nbsp;&nbsp;
                 <a  class="btn btn-danger" id="add" >新增</a>&nbsp;&nbsp;
               </div>
              <!-- /.box-footer -->
            </form>
          </div> 
 
 
                 <div class="box-header">
                  <h3 class="box-title">权限列表</h3>
                 </div><!-- /.box-header -->
                <div class="box-body" id="permissionList">

                </div><!-- /.box-body -->
              </div><!-- /.box -->
            </div><!-- /.col -->
          </div><!-- /.row -->


            <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"   >
                <div class="modal-dialog" role="document" style="width: 70%;" >
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel" style="font-weight: bold;" >请添加权限</h4>
                        </div>

                        <div class="modal-body">
                            <form class="form-horizontal">
                                <div class="box-body">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <label for="permissionName">权限名</label>
                                                <input class="form-control" id="permissionName" />
                                            </div>
                                            <div class="col-sm-6">
                                                <label for="mapping">类:方法</label>
                                                <input class="form-control" id="mapping" />
                                            </div>
                                            <div class="col-sm-6">
                                                <label for="url">url</label>
                                                <input class="form-control" id="url" />
                                            </div>
                                            <div class="col-sm-6">
                                                <label for="type">类型</label>
                                                <select class="form-control" id="type" >
                                                    <option value="1">页面</option>
                                                    <option value="2">ajax数据</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.box-body -->
                            </form>
                        </div>

                        <div class="modal-footer">
                            <button type="button" id="save"   class="btn btn-primary" data-dismiss="modal"  >保存</button>
                            <button type="button" id="close_modal"   class="btn btn-default" data-dismiss="modal"  >关闭</button>
                        </div>

                    </div>
                </div>
            </div>
 
 
        </section>
 
      </div>
   
<#include "/foot.html" parse=true/>

 

    
    <!-- page script -->
    <script type="text/javascript">
     $(function () {
 
        $("#close_modal").click(function(){
        	
            $('#modal').modal('hide');
        	
        });
        
        $("#add").click(function(){
            $("#modal").modal("show");

        });

         $("#save").click(function (){

             var permissionName = $("#permissionName").val();
             var mapping = $("#mapping").val();
             var url = $("#url").val();
             var type = $("#type").val();

             $.ajax({
                 type : "get",
                 url : "${base}/permission/add",
                 data : {permissionName : permissionName,mapping:mapping,url:url,type:type},
                 success : function(data) {
                     if(data=="1"){
                         alert("新增成功!");
                         $('#modal').modal('hide');
                     }else{
                         alert("新增失败!");
                         return false;
                     }

                 }
             });

         });
 
    });
    
    $("#query").click(function(){
    	
        $(".ajaxLoading").fadeIn(10);
    	var permissionName = $("#permissionName_query").val();
    	var mapping = $("#mapping_query").val();
    	var url = $("#url_query").val();

    	$("#permissionList").empty();
    	
    	$.getJSON('${base}/permission/getList',{permissionName:permissionName,mapping:mapping,url:url},function(data){
        	//此处返回的data已经是json对象
         	
        	var tableContent ="<table id='permissionTable' class='table table-bordered table-hover'>"
        	+"<thead><tr><th style='text-align: center;' >映射</th>"
            +"<th style='text-align: center;' >名称</th>"
        	+"<th style='text-align: center;' >url</th><th style='text-align: center;'>类型</th>"
            +"<th  style='text-align: center;'>操作</th></tr></thead><tbody>";
        	
        	var tbodyContent ="";
        	$.each(data,function(i,item){

        		var name = item.name;
        		var mapping = item.mapping;
        		var url = item.url;
        		var type = item.type;

                if(type=="1"){
                    type="页面";
                }else{
                    type="ajax";
                }

    	    	tbodyContent = tbodyContent+"<tr >"
    	    	+"<td >"+mapping+"</td>"
     	    	+"<td style='text-align: center;'>"+name+"</td>"
    	    	+"<td style='text-align: center;'>"+url+"</td>"
    	    	+"<td style='font-weight:bold;color:red;text-align: center;'>"+type+"</td>"
    	    	+"<td style='text-align: center;' ><a class='btn btn-default'><i class='fa fa-remove'></i>删除</a></td>"
     	    	+"</tr>";
        		
         	});
	
        	$("#permissionList").append(tableContent+tbodyContent+"</tbody></table>");

            $('#permissionTable').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": true,
                "bDestroy":true,
                "sProcessing" : "正在读取数据..."
              });

        });// end getJSON


        $(".ajaxLoading").fadeOut(1000);
        
     });  
    
    
    $("#reset").click(function(){
     	$("input[type=text]").val("");
    });

    
 function centerModals() {
	    $('#modal').each(function(i) {   
	        var $clone = $(this).clone().css('display', 'block').appendTo('body'); var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
	        top = top > 0 ? top : 0;   
	        $clone.remove();   
	        $(this).find('.modal-content').css("margin-top", top);   
	    });   
	}   
	$('#modal').on('show.bs.modal', centerModals);   
	$(window).on('resize', centerModals);  
    
    </script>

  </body>
</html>
